<template>
  <el-dialog v-model="dialogVisible" title="确认操作" width="400px" :close-on-click-modal="false">
    <div class="confirm-content">
      <p>确定要将需求</p>
      <p class="requirement-title">"{{ card?.summary }}"</p>
      <p>从 "{{ getSourceLaneTitle() }}" 拖拽到 "{{ getTargetLaneTitle() }}" 吗？</p>
    </div>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { UserRequirement } from "@/views/rd/userRequirement/types/userRequirement";
import { SprintBoard } from "../types/sprintBoard";

interface Props {
  visible: boolean;
  sourceLane: SprintBoard.KanbanStatus | null;
  targetLane: SprintBoard.KanbanStatus | null;
  card: UserRequirement | null;
}

interface Emits {
  (e: "update:visible", value: boolean): void;
  (e: "confirm"): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const dialogVisible = ref(false);

// 监听visible变化
watch(
  () => props.visible,
  newVal => {
    dialogVisible.value = newVal;
  }
);

// 监听dialogVisible变化
watch(dialogVisible, newVal => {
  if (!newVal) {
    emit("update:visible", false);
  }
});

// 获取源泳道标题
const getSourceLaneTitle = () => {
  if (!props.sourceLane) return "";

  switch (props.sourceLane) {
    case SprintBoard.KanbanStatus.TODO:
      return "待开始";
    case SprintBoard.KanbanStatus.IN_PROGRESS:
      return "进行中";
    case SprintBoard.KanbanStatus.DONE:
      return "已完成";
    default:
      return "";
  }
};

// 获取目标泳道标题
const getTargetLaneTitle = () => {
  if (!props.targetLane) return "";

  switch (props.targetLane) {
    case SprintBoard.KanbanStatus.TODO:
      return "待开始";
    case SprintBoard.KanbanStatus.IN_PROGRESS:
      return "进行中";
    case SprintBoard.KanbanStatus.DONE:
      return "已完成";
    default:
      return "";
  }
};

// 处理取消
const handleCancel = () => {
  dialogVisible.value = false;
};

// 处理确认
const handleConfirm = () => {
  emit("confirm");
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.confirm-content {
  text-align: center;
  .requirement-title {
    font-weight: bold;
    color: var(--el-color-primary);
  }
}
</style>
